<ion-view title="圈子" hide-nav-bar="false">
  <!--<div class="bar bar-subheader" style="margin: 0px;margin-top: -1px; padding: 0px;display: flex;">
    <div class=" button-bar" style="margin: 0px;padding: 0px;">
      <button class="button button-light button-android" ng-class="{ 'button-positive': demo == 'carclub' }" ng-click="setPlatform('carclub')" style="border-radius:0px;">
        车友汇
      </button>
      <button class="button button-light button-android" ng-class="{ 'button-positive': demo == 'selfdrive' }" ng-click="setPlatform('selfdrive')">
        自驾游
      </button>
      <button class="button button-light button-android" ng-class="{ 'button-positive': demo == 'caractive' }" ng-click="setPlatform('caractive')">
        车友活动
      </button>
      <button class="button button-light button-android" ng-class="{ 'button-positive': demo == 'voice' }" ng-click="setPlatform('voice')" style="border-radius:0px;">
        我代言
      </button>
    </div>

  </div>-->
  <div class="tabs tabs-top tabs-striped tabs-color-positive" style="top: 42px; line-height: 38px; height: 38px;">
    <a class="tab-item" ng-class="{active: demo == 'carclub'}" ng-click="setPlatform('carclub')">车友汇</a>
    <a class="tab-item" ng-class="{active: demo == 'selfdrive'}" ng-click="setPlatform('selfdrive')">自驾游</a>
    <a class="tab-item" ng-class="{active: demo == 'caractive'}" ng-click="setPlatform('caractive')">车友活动</a>
    <a class="tab-item" ng-class="{active: demo == 'voice'}" ng-click="setPlatform('voice')" >我代言</a>
  </div>
  <div>
  <ion-content style="padding-top: 36px;" has-bouncing="true">
    <!--<div class="button-bar" ng-init="model=1">
      <a class="button" ng-click="model=1" ng-class="{active: model==1}">车友汇</a>
      <a class="button" ng-click="model=2" ng-class="{active: model==2}">自驾游</a>
      <a class="button" ng-click="model=3" ng-class="{active: model==3}">车友活动</a>
      <a class="button" ng-click="model=4" ng-class="{active: model==4}">我代言</a>
    </div>-->
    <div ng-switch on="demo" class="car-community">
      <div ng-switch-default class="">
        <a ng-repeat="club in clubs" class="list card" href="#/tab/community/club/{{$index}}">
          <div class="img-mask item item-image">
            <img ng-src="{{club.imgSrc}}" width="100%">
            <div class="mask-bottom"></div>
            <div class="mask-top" style="text-align: left">{{club.text}}</div>
          </div>
          <div class="activity-text text-indent item">{{club.text}}</div>
        </a>
      </div>
      <div ng-switch-when="selfdrive" class=" ">
        <a ng-repeat="drive in selfDrives" class="list card " href="#/tab/community/self-drive/{{$index}}">

          <div class="item item-image">
            <img ng-src="{{drive.imgSrc}}" width="100%">
          </div>
          <div class="item ">
            <div class="activity-title">{{drive.title}}&nbsp;&nbsp;&nbsp;{{drive.date}}2014.12.12&nbsp;出发</div>
            <div class="activity-text">{{drive.description}}dfsf饭店服务方法十分乳房</div>
            <div class="relative"><div class="activity-info"><span class="darkorange">￥<span class="activity-price">{{drive.price}}860</span></span> 起/份</div></div>
          </div>

        </a>
      </div>
      <div ng-switch-when="caractive" >
        <a ng-repeat="activity in selfDrives" class="list card" href="#/tab/community/car-activity/{{$index}}">
          <div class="item item-image">
            <img ng-src="{{activity.imgSrc}}" width="100%">
          </div>
          <div class="item ">
            <div class="activity-text">{{activity.description}}dfsf饭店服务方法十分乳房</div><br>
            <div class="relative">
              <div class="activity-info"><span class="orangered">已有{{activity.count}}20人报名</span></div>
            </div>
          </div>
        </a>
      </div>
      <div ng-switch-when="voice" >
        <a ng-repeat="voice in selfDrives" class="list card" href="#/tab/community/voice/{{$index}}">
          <div class="item item-image">
            <img ng-src="{{voice.imgSrc}}" width="100%">
          </div>
          <div class="item ">
            <div class="activity-text">{{voice.description}}dfsf饭店服务方法十分乳房</div><br>
            <div class="relative">
              <div class="activity-info">共50个名额，<span class="orangered bigger">22人</span>已报名</div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </ion-content>
  </div>
</ion-view>
